<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="showTranslatePopup('我是一段文字')">弹出</button>
</body>
<!--必须又jquery才能用-->
<script src="https://code.jquery.com/jquery.min.js"></script>

<script src="/static/layer-v3.5.1/layer/layer.js"> </script>
<script>
    /*专门给手机端写的函数，实现弹出框的拖动，传入想拖动的WebElement和他的父盒子*/
/*线上使用路径：src="/js/layer-v3.5.1/layer/layer.js"*/
    //将传入的文本o以弹窗的形式展示出来
    function showTranslatePopup(o) {
        layer.open({
            type: 1,
            skin: 'layui-layer-demo', //样式类名
            closeBtn: 0, //显示关闭按钮(0不显示)
            anim: 2,
            shadeClose: true, //开启遮罩关闭(就是点击空白部分自动关闭)
            content: '<p style="font-size: 17px;color: red;width: 500px;height: 400px;word-wrap: break-word;overflow-y: auto;">' + o + '</p>',//可以是html
            title:`<div style="width: 100%;height: 100%;text-align: center;"></div>`,//没有title
            resize: false,//不允许拉伸
            move: ".layui-layer-title"//触发拖动元素，默认时title，改成content,手机端浏览器无法拖动

        });

        /*设置弹出框内容的背景色*/
        document.querySelector(".layui-layer-demo").style.backgroundColor = "rgba(1,1,1,0.5)"
        document.querySelector(".layui-layer-title").style.backgroundColor = "blue"
        if(navigator.userAgent.match("Android")||navigator.userAgent.match("IOS"))
        {
            dragAndDropForPhone(document.querySelector(".layui-layer-title"),document.querySelector(".layui-layer-demo"))
        }
    }
    function dragAndDropForPhone(e,parent) {
        var startX = 0; // 获取手指初始坐标
        var startY = 0;
        var x = 0; // 获得盒子原来的位置
        var y = 0;
        // 手指触摸
        e.addEventListener('touchstart', function(e) {
            //  获取手指初始坐标
            startX = e.targetTouches[0].pageX;
            startY = e.targetTouches[0].pageY;
            //x = this.offsetLeft;
            //y = this.offsetTop;
            x=parent.offsetLeft
            y=parent.offsetTop;
            //this.style.boxShadow = '0 0 15px rgba(0, 0, 0, .6)';
            parent.style.boxShadow = '0 0 15px rgba(0, 0, 0, .6)';
        });
        // 手指离开
        e.addEventListener('touchend', function(e) {
            //this.style.boxShadow = '';
            parent.style.boxShadow = '';
        });

        // 手指按住移动
        e.addEventListener('touchmove', function(e) {
            //  计算手指的移动距离：手指移动之后的坐标减去手指初始的坐标
            var moveX = e.targetTouches[0].pageX - startX;
            var moveY = e.targetTouches[0].pageY - startY;
            // 移动盒子 盒子原来的位置 + 手指移动的距离

            //this.style.left = x + moveX + 'px';
            //this.style.top = y + moveY + 'px';
            parent.style.left = x + moveX + 'px';
            parent.style.top = y + moveY + 'px';
            e.preventDefault(); // 阻止屏幕滚动的默认行为
        });

    }
</script>
</html>